<template>
  <div class="chart-wrapper" :class="size">
    <div class="chart-title" @click="toPage()"><span>{{ data && data.name }}</span></div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import { option, xAxis, yAxis } from '@/constants/chartOptions'
export default {
  name: 'CommonChart',
  props: ['chartType', 'size', 'data'],
  data () {
    return {
      chartTypes: ['pie', 'line', 'bar'],
      chartId: 'chart-' + Math.floor(Math.random() * 1000000000),
      colors: {
        normal: ['#25a9e1', '#e16400', 'rgba(248,121,160,0.93)', '#46e04d'],
        emphasis: ['#25a9e1', '#e16400', '#46e04d']
      },
      option: JSON.parse(JSON.stringify(option)),
      xAxis: JSON.parse(JSON.stringify(xAxis)),
      yAxis: JSON.parse(JSON.stringify(yAxis))
    }
  },
  mounted () {
    const self = this
    setTimeout(() => {
      if (this.chartTypes.includes(this.chartType)) {
        self.draw()
      }
    }, 100)
  },
  watch: {
    data: {
      handler () {
        const self = this
        setTimeout(() => {
          if (this.chartTypes.includes(this.chartType)) {
            self.draw()
          }
        }, 200)
      },
      deep: true
    }
  },
  methods: {
    draw () {
      if (this.data.series) {
        const myChart = this.$echarts.init(document.getElementById(this.chartId))
        const option = this.option
        if (['bar', 'line'].includes(this.chartType)) {
          if (this.data.xAxis) {
            option.xAxis = this.data.xAxis.map(x => {
              return Object.assign(this.xAxis, x)
            })
          } else {
            option.yAxis = this.yAxis
          }
          if (this.data.yAxis) {
            option.yAxis = this.data.yAxis.map(y => {
              return Object.assign(this.yAxis, y)
            })
          } else {
            option.yAxis = this.yAxis
          }
        }
        if (option.legend && this.data.legend) {
          option.legend.data = this.data.legend
        }
        if (this.data.top && option.grid) {
          option.grid.top = this.data.top
        }
        option.title.text = this.data.title
        if (this.data.y) {
          option.title.y = this.data.y
        }
        if (this.data.ly) {
          option.legend.y = this.data.ly
        }
				if (this.data.dataZoom) {
				  option.dataZoom = this.data.dataZoom
				}
        if (this.data.titleOption) {
          option.title = Object.assign(option.title, this.data.titleOption)
        }
        option.series = this.data.series
        option.series.forEach((ele, index) => {
          ele.type = this.chartType
          ele.itemStyle = {
            normal: {
              color: this.colors.normal[index]
            },
            emphasis: {
              color: this.colors.emphasis[index]
            }
          }
        })
        myChart.setOption(option)
      }
    },
    toPage () {
      if (this.data && this.data.routeName) {
        this.$router.replace({ name: this.data.routeName, query: this.data.query })
      }
    }
  },
  beforeDestroy () {
    const chart = document.getElementById(this.chartId)
    if (chart) {
      const parent = chart.parentNode
      if (parent) {
        parent.removeChild(chart)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
